<template>
  <div>
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>研究生</el-breadcrumb-item>
      <el-breadcrumb-item>文章列表</el-breadcrumb-item>
    </el-breadcrumb>

    <el-card class="box-card">
      <el-select v-model="value" placeholder="文章状态" @change="getValue">
        <el-option
          v-for="item in options"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        >
        </el-option>
      </el-select>

      <el-tooltip
        class="item"
        effect="dark"
        content="Top Center 提示文字"
        placement="top"
        v-show="reason"
      >
        由于您的文章不符合要求，因此无法通过
      </el-tooltip>
      <!-- 表格 -->
      <el-table
        :data="allArticle"
        border
        style="width: 100%"
        class="artileTable"
      >
        <el-table-column type="index" label="序号" align="center">
        </el-table-column>
        <el-table-column prop="title" label="文章标题" align="center">
        </el-table-column>

        <el-table-column prop="coverUrl" label="封面图" align="center">
          <template width="40" slot-scope="scope">
            <img
              style="width: 80px; height: 80px; border: none"
              :src="scope.row.coverUrl"
            />
          </template>
        </el-table-column>
        <el-table-column prop="readNums" label="阅读量" align="center">
        </el-table-column>
        <el-table-column prop="likeNums" label="点赞数" align="center">
        </el-table-column>
        <el-table-column prop="collectNums" label="收藏量" align="center">
        </el-table-column>
        <el-table-column
          prop="createTime"
          width="100"
          label="创建时间"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="updateTime"
          width="100"
          label="更新时间"
          align="center"
        ></el-table-column>
        <el-table-column prop="status" label="文章状态" align="center">
          <template slot-scope="scope">
            <span>
              {{ scope.row.status | ReqStatus }}
            </span>
          </template>
        </el-table-column>

        <el-table-column prop="status" label="操作" width="250" align="center">
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="danger"
              @click="deleteArticle(scope.$index, scope.row.id)"
            >
              删除
            </el-button>
            <el-button
              size="mini"
              type="primary"
              @click="toEdit(scope.row.content, scope.row.id, scope.row.title)"
            >
              编辑
            </el-button>
            <el-button
              size="mini"
              type="success"
              v-show="sendAgain"
              @click="toSendAgain(scope.row.id, scope.$index)"
            >
              提交
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="block">
        <!-- 弹出框 -->
        <el-dialog
          title="更新文章"
          :visible.sync="dialogFormVisible"
          class="list-dialog"
        >
          <el-form :model="form">
            <el-form-item label="文章标题" :label-width="formLabelWidth">
              <el-input v-model="form.name" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="文章封面" :label-width="formLabelWidth">
              <!-- 上传文件 -->
              <el-upload
                class="upload-demo"
                action=""
                :on-preview="handlePreview"
                :on-remove="handleRemove"
                :before-remove="beforeRemove"
                :limit="1"
                :on-exceed="handleExceed"
                :http-request="handleUpload"
              >
                <el-button size="small" type="primary">点击上传</el-button>
              </el-upload>
            </el-form-item>
            <el-form-item label="文章内容" :label-width="formLabelWidth">
              <!-- 富文本编辑器 -->
              <editor-bar
                class="list-editor"
                :isClear="isClear"
                @change="change"
                :newValue="parentContent"
              ></editor-bar>
            </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible = false">取 消</el-button>
            <el-button type="primary" @click="updateArticle">确 定</el-button>
          </div>
        </el-dialog>
        <!-- 分页器 -->
        <el-pagination
          @current-change="handleCurrentChange"
          :page-size="4"
          layout="total, prev, pager, next"
          :total="totalPage"
        >
        </el-pagination>
      </div>
    </el-card>
  </div>
</template>

<script>
import EditorBar from "../../components/wangEnduit";
import axios from "axios";
import {
  ReqGetUserArticle,
  ReqDeleteArticle,
  ReqUpdateArticle,
  ReqSubmitIdentity,
} from "../../request/index.js";
export default {
  inject: ["reload"], //刷新依赖
  components: { EditorBar },
  data() {
    return {
      //富文本
      test: "",
      //detailContent: "",
      isClear: false,
      detail: "",
      addUserInfoVisible: false,
      allArticle: [], //表格数据
      identityStatus: 0,
      sendAgain: true,
      reason: false,
      options: [
        {
          value: 1,
          label: "审核中",
        },
        {
          value: "2",
          label: "未通过",
        },
        {
          value: "3",
          label: "通过",
        },
        {
          value: "0",
          label: "未发布",
        },
      ],
      value: "0",
      status: "",
      totalPage: 0,
      page: 1,
      articleId: "",
      //content:''
      dialogFormVisible: false,
      form: {
        name: "",

        delivery: false,
        type: [],
      },
      formLabelWidth: "120px",

      //更新文章所需参数
      rowId: "",
      tempRowFile: {},
      parentContent: "",
    };
  },

  methods: {
    seeCourseDetailInfo() {
      this.addUserInfoVisible = true;
    },
    change(val) {
      this.parentContent = val;
    },
    //打开弹窗并传递数据
    toEdit(content, id, title) {
      this.dialogFormVisible = true;
      let elDialog = document.getElementsByClassName("el-dialog")[0];
      elDialog.style.marginTop = 5 + "vh";
      this.rowId = id;
      this.form.name = title;
      this.parentContent = content;
    },
    //-------------------上传文件函数-------------------
    // beforeAvatarUpload(file) {
    //   let fd = new FormData();
    //   fd.append("file", file); //传文件

    //   console.log(fd);
    //   ReqUpdateArticle({
    //     cover: fd,
    //     id: this.id1,
    //   }).then((res) => {
    //     console.log(res);
    //   });
    // },
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    handlePreview(file, fileList) {
      console.log(file, fileList);
    },
    handleExceed(files, fileList) {
      this.$message.warning(`当前限制选择 1 个文件`);
    },
    beforeRemove(file, fileList) {
      return this.$confirm(`确定移除 ${file.name}？`);
    },
    handleUpload(file, fileList) {
      this.tempRowFile = file.file;
    },

    //-------------------上传文件函数-------------------

    //更新文章
    updateArticle() {
      this.dialogFormVisible = false;

      //调用接口
      ReqUpdateArticle({
        title: this.form.name,
        id: this.rowId,
        cover: this.tempRowFile,
        content: this.parentContent,
      }).then((res) => {
        if ((res.msg = "成功")) {
          this.reload();
          this.$message({
            showClose: true,
            message: "更新成功",
            type: "success",
          });
          this.rowId = "";
          this.tempRowFile = {};
        } else {
          this.$message({
            showClose: true,
            message: "更新失败",
            type: "warning",
          });
        }
      });
    },

    //根据状态获取文章
    getValue(status) {
      //根据状态显示样式
      if (status == 1 || status == 3) {
        this.sendAgain = false;
        this.reason = false;
      } else if (status == 2) {
        this.sendAgain = true;
        this.reason = true;
      } else {
        this.sendAgain = true;
        this.reason = false;
      }
      this.identityStatus = parseInt(status);
      ReqGetUserArticle({
        num: 4,
        begin: 1,
        userId: "13f897e1fc7849a984de24eba92bf4ff",
        status: this.identityStatus,
      }).then((res) => {
        this.allArticle = res.data.records;
        this.totalPage = parseInt(res.data.total);

        let articleId = res.data.records.id;
      });
    },
    //删除数据
    deleteArticle(val, rowId) {
      let lastPage = Math.ceil(this.totalPage / 4); //获取最后页数
      let lastPageSize = this.totalPage % 4; //获取最后一页页数

      console.log(lastPageSize);
      let articleId = rowId;

      ReqDeleteArticle({ id: articleId }).then((res) => {
        console.log(res);
        if ((res.msg = "成功")) {
          this.allArticle.splice(val, 1);
          this.totalPage = this.totalPage - 1;
          this.page = lastPageSize == 1 ? this.page - 1 : this.page;
          this.handleCurrentChange(this.page);
          this.$message({
            showClose: true,
            message: "删除成功",
            type: "success",
          });
        } else {
          this.$message({
            showClose: true,
            message: "删除失败",
            type: "warning",
          });
        }
      });
    },
    //分页
    handleCurrentChange(newPage = this.page) {
      this.page = newPage;
      console.log(newPage);
      ReqGetUserArticle({
        num: 4,
        begin: this.page,
        userId: "13f897e1fc7849a984de24eba92bf4ff",
        status: this.identityStatus,
      }).then((res) => {
        this.allArticle = res.data.records;
        this.totalPage = res.data.total;
      });
    },
    //提交审核
    toSendAgain(articleId, val) {
      ReqSubmitIdentity({
        articleId: articleId,
      }).then((res) => {
        console.log(res);

        if ((res.msg = "成功")) {
          this.allArticle.splice(val, 1);
          this.$message({
            showClose: true,
            message: "提交成功",
            type: "success",
          });
        } else {
          this.$message({
            showClose: true,
            message: "提交失败",
            type: "warning",
          });
        }
      });
    },
  },
  created() {
    ReqGetUserArticle({
      num: 4,
      begin: this.page,
      userId: "13f897e1fc7849a984de24eba92bf4ff",
      status: 0,
    }).then((res) => {
      this.allArticle = res.data.records;
      this.totalPage = res.data.total;
      let articleId = res.data.records.id;
    });
  },

  filters: {
    ReqStatus(status) {
      switch (status) {
        case 0:
          return "未发布";
          break;
        case 1:
          return "审核中";
          break;
        case 2:
          return "未通过";
          break;
        case 3:
          return "通过";
          break;
      }
    },
  },
};
</script>

<style scoped>
.el-select {
  width: 110px;
}
.artileTable {
  margin-top: 15px;
}
.el-card__body {
  margin: 10px;
}
.el-upload-list el-upload-list--text {
  display: none;
}
.list-dialog >>> .el-dialog {
  width: 60%;
}
.list-editor >>> .text {
  height: 350px;
}
.list-dialog >>> .el-dialog__body {
  margin: 20px 35px 5px 0px;
  padding: 0px;
}
.tips {
  float: left;
}
.item {
  margin: 4px;
}
</style>
<style></style>
